import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:sports_new/controller/my/login_logic.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/resources/styles.dart';
import 'package:sports_new/utils/constant.dart';
import 'package:sports_new/utils/regex_util.dart';
import 'package:sports_new/utils/routes.dart';
import 'package:sports_new/utils/utils.dart';
import 'package:sports_new/utils/widget_utils.dart';
import 'package:sports_new/view/my/my_web_page.dart';
import 'package:sports_new/widgets/base/qkd_button.dart';

import '../../widgets/base/qkd_text.dart';

class MyLoginPage extends StatefulWidget {
  const MyLoginPage({super.key});

  @override
  State<MyLoginPage> createState() => _MyLoginPageState();
}

class _MyLoginPageState extends State<MyLoginPage> {
  final logic =
      Get.put(LoginLogic(), tag: Get.arguments == LoginType.bind ? '1' : '0');
  final phoneC = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colours.transparent,
        leading: IconButton(
          onPressed: Get.back,
          icon: Image.asset(
            Utils.getImgPath('close.png'),
            width: 24,
            height: 24,
            color: Colours.black,
          ),
        ),
      ),
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        top: false,
        child: Column(
          children: [
            SizedOverflowBox(
              size: Size(Get.width, 188),
              alignment: Alignment.topCenter,
              child: Image.asset(
                Utils.getImgPath('login_header.png'),
                fit: BoxFit.cover,
                width: Get.width,height: 200,
              )
            ),
            Expanded(
              child: Container(
                clipBehavior: Clip.antiAlias,
                padding: const EdgeInsets.symmetric(horizontal: 40),
                decoration: const BoxDecoration(
                  color: Colours.white,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(12))
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(height: 40),
                    const QkdText('手机号登录',
                      fontSize: 20,
                      fontWeight: FontWeight.w500
                    ),
                    const SizedBox(height: 10),
                    QkdText(
                        logic.type == LoginType.login
                            ? '未注册的手机号登录成功后将自动注册'
                            : '绑定手机号',
                        color: Colours.grey66
                    ),
                    const SizedBox(height: 32),
                    phoneWidget(),
                    const SizedBox(height: 20),
                    QkdButton.large(
                      onPressed: next,
                      text: '下一步',
                      height: 48,
                      foregroundColor: Colors.white,
                      backgroundColor: phoneC.text.length == 11
                          ? Colours.main
                          : Colours.main.withOpacity(0.5),
                      borderRadius: 24,
                    ),
                    const SizedBox(height: 12),
                    privacyWidget(),
                    const Spacer(),
                    if (Get.arguments != LoginType.bind)...[
                      const Center(
                        child: QkdText("其他登录方式",
                          fontSize: 12,color: Colours.grey99
                        )
                      ),
                      Container(height: 16),
                      thirdLoginWidget()
                    ],
                    Container(height: 50)
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }

  phoneWidget() {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF4F6F8),
        borderRadius: BorderRadius.circular(24)
      ),
      child: Row(children: [
        Container(
          width: 60,
          alignment: Alignment.center,
          child: const QkdText(
            '+86',
            fontSize: 16,
            color: Colours.grey99,
            fontWeight: FontWeight.w500
          )
        ),
        Container(
          width: 1,
          height: 21,
          color: Colours.greyCC,
        ),
        Expanded(
            child: TextField(
          controller: phoneC,
          keyboardType: TextInputType.number,
          style: const TextStyle(
              color: Colours.black333333,
              fontSize: 16,
              fontWeight: FontWeight.w500),
          inputFormatters: [
            FilteringTextInputFormatter.allow((RegExp(RegexUtil.number)))
          ],
          onChanged: (value) {
            update();
          },
          decoration: InputDecoration(
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(4),
                borderSide: BorderSide.none),
            contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
            hintText: "请输入手机号",
            hintStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w400,color: Colours.greyCC),
            suffixIconConstraints: const BoxConstraints(minHeight: 20, minWidth: 20),
            suffixIcon: phoneC.text.isEmpty
                ? null
                : GestureDetector(
                    onTap: () {
                      setState(() {
                        phoneC.text = '';
                      });
                    },
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      child: Image.asset(
                        Utils.getImgPath('grey_close.png'),
                        width: 16,
                        height: 16,
                      ),
                    ),
                  ),
          ),
        ))
      ]),
    );
  }

  privacyWidget() {
    return RichText(
      strutStyle: Styles.centerStyle(fontSize: 12),
      text: TextSpan(
        children: [
          WidgetSpan(
            child: GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: logic.agreeUserPrivacy,
              child: Obx(
                () => Padding(
                  padding: const EdgeInsets.only(right: 6),
                  child: Icon(
                    logic.agreePrivacy.value
                      ? Icons.check_circle_rounded
                      : Icons.radio_button_off_sharp,
                    color: logic.agreePrivacy.value
                      ? Colours.main
                      : Colours.grey99,
                    size: 14,
                  ),
                )
              )
            )
          ),
          TextSpan(
            children: [
              const TextSpan(
                text: '已同意',
                style: TextStyle(color: Colours.grey99, fontSize: 12)
              ),
              TextSpan(
                text: '《服务协议》',
                style: const TextStyle(color: Colours.blue2766D6, fontSize: 12),
                recognizer: TapGestureRecognizer()
                ..onTap = () => Get.toNamed(Routes.webview,
                  arguments: WebPara(
                    Constant.serviceAgreementUrl,
                    longpress: true
                  )
                )
              ),
              const TextSpan(
                text: '和',
                style: TextStyle(color: Colours.grey99, fontSize: 12)
              ),
              TextSpan(
                text: '《隐私政策》',
                style: const TextStyle(color: Colours.blue2766D6, fontSize: 12),
                recognizer: TapGestureRecognizer()
                ..onTap = () {
                  Get.toNamed(Routes.webview,
                    arguments: WebPara(
                      Constant.privacyPolicyUrl,
                      longpress: true
                    )
                  );
                }
              )
            ]
          )
        ]
      )
    );
  }

  thirdLoginWidget() {
    return Center(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          GestureDetector(
            onTap: () => logic.onWechatLogin(),
            child: Image.asset(
              Utils.getImgPath('login_wx.png'),
              width: 40,
            ),
          ),
          const SizedBox(width: 38),
          GestureDetector(
            onTap: () => logic.onQQLogin(),
            child: Image.asset(
              Utils.getImgPath('login_qq.png'),
              width: 40,
            ),
          ),
          // SizedBox(width: 38),
          // GestureDetector(
          //   onTap: () => logic.onWeiboLogin(),
          //   child: Image.asset(
          //     Utils.getImgPath('login_wb.png'),
          //     width: 40,
          //   ),
          // ),
        ],
      ),
    );
  }

  next() {
    if (phoneC.text.length == 11) {
      FocusScope.of(context).requestFocus(FocusNode());
      logic.doSendSms(phoneC.text);
    }
  }
}
